<template>
  <div class="filter" v-if="showFilter">
    <ul>
      <li 
        v-for="(item,index) in filterData" 
        :class="{select:item.isClass}"
        :key=""
        @click="handleItemClick(item.id)"
      >
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import FadeAnimation from '../animation/Fade'
  
export default{
  name: 'HomeFilter',
  props: {
    filterView: Boolean,
		filterData: Array,
		newProducts: Array,
  },
  data() {
    return {
      showFilter: true,
			sortProducts: [],
    }
  },
  watch: {
    filterView: function() {
      this.showFilter = this.filterView
    }
  },
  components: {
    FadeAnimation,
  },
  methods: {
    handleItemClick(id){
			// 焦点样式
      this.filterData.forEach((item) => {
        item.isClass = false
        if(item.id == id){
          item.isClass = true
        }
      })
			
			// 排序
			switch(id){
				case 0:
				this.$store.commit('sortItem','id')
				break;
				case 1:
				this.$store.commit('sortItem','rating')
				break;
				case 2:
				this.$store.commit('sortItem','sales')
				break;
				default:
				break;
			}
    },
  },
}
</script>

<style scoped>
.filter { height: 10vw; position: sticky; z-index: 0; top: 15.2vw; margin: 2.6vw 4.3vw 4.3vw 4.3vw; background: #fff; border-bottom: 1px solid rgba(0,0,0,.05);}
.filter ul { overflow: auto; width: 90vw; margin: auto;}
.filter ul li { float: left; width: 18.3vw; height: 10vw; line-height: 11vw; margin: 0 5.8vw; color: #333; list-style-type: none;}
.select{ border-bottom: 2px solid rgb(35, 149, 255); }
</style>